<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div class="slideout-sidebar">
    <h1>EmphasisMaterial</h1>
    <p>A scene graph containing five objects, each with their own custom EmphasisMaterial for highlighted appearance.
        Mouse over the objects to highlight them.</p>
    <h3>Components used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/nodes/Node.js~Node.html"
               target="_other">Node</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/mesh/Mesh.js~Mesh.html"
               target="_other">Mesh</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/geometry/ReadableGeometry.js~ReadableGeometry.html"
               target="_other">ReadableGeometry</a>
        </li>
        <li>
            <a href="../../docs/function/index.html#static-function-buildBoxGeometry"
               target="_other">buildBoxGeometry()</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/materials/PhongMaterial.js~PhongMaterial.html"
               target="_other">PhongMaterial</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/materials/EmphasisMaterial.js~EmphasisMaterial.html"
               target="_other">EmphasisMaterial</a>
        </li>
    </ul>
</div>
</body>

<script type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {
        Viewer,
        Mesh,
        Node,
        PhongMaterial,
        EmphasisMaterial,
        buildBoxGeometry,
        ReadableGeometry
    } from "../../dist/xeokit-sdk.min.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer and arrange the camera
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true
    });

    viewer.scene.camera.eye = [-21.80, 4.01, 6.56];
    viewer.scene.camera.look = [0, -5.75, 0];
    viewer.scene.camera.up = [0.37, 0.91, -0.11];

    //------------------------------------------------------------------------------------------------------------------
    // Build a simple scene graph representing a table with four legs
    //------------------------------------------------------------------------------------------------------------------

    const boxGeometry = new ReadableGeometry(viewer.scene, buildBoxGeometry({
        xSize: 1,
        ySize: 1,
        zSize: 1
    }));

    new Node(viewer.scene, {
        objectId: "table", // <---------- Node with "objectId" represents a 3D object
        rotation: [0, 50, 0],
        position: [0, 0, 0],
        scale: [1, 1, 1],

        children: [

            new Mesh(viewer.scene, { // Red table leg
                objectId: "redLeg",
                position: [-4, -6, -4],
                scale: [1, 3, 1],
                rotation: [0, 0, 0],
                geometry: boxGeometry,
                material: new PhongMaterial(viewer.scene, {
                    diffuse: [1, 0.3, 0.3]
                }),
                highlightMaterial: new EmphasisMaterial(viewer.scene, {
                    fill: true,
                    fillColor: [1, 0, 0],
                    fillAlpha: 0.7,
                    edges: true,
                    edgeColor: [1.0, 0.0, 0.0],
                    edgeAlpha: 1.0,
                    edgeWidth: 2
                })
            }),

            new Mesh(viewer.scene, { // Green table leg
                objectId: "greenLeg",
                position: [4, -6, -4],
                scale: [1, 3, 1],
                rotation: [0, 0, 0],
                geometry: boxGeometry,
                material: new PhongMaterial(viewer.scene, {
                    diffuse: [0.3, 1.0, 0.3]
                }),
                highlightMaterial: new EmphasisMaterial(viewer.scene, {
                    fill: true,
                    fillColor: [0, 1, 0],
                    fillAlpha: 0.7,
                    edges: true,
                    edgeColor: [1.0, 0.0, 0.0],
                    edgeAlpha: 1.0,
                    edgeWidth: 2
                })
            }),

            new Mesh(viewer.scene, {// Blue table leg
                objectId: "blueLeg",
                position: [4, -6, 4],
                scale: [1, 3, 1],
                rotation: [0, 0, 0],
                geometry: boxGeometry,
                material: new PhongMaterial(viewer.scene, {
                    diffuse: [0.3, 0.3, 1.0]
                }),
                highlightMaterial: new EmphasisMaterial(viewer.scene, {
                    fill: true,
                    fillColor: [0, 0, 1],
                    fillAlpha: 0.7,
                    edges: true,
                    edgeColor: [1.0, 0.0, 0.0],
                    edgeAlpha: 1.0,
                    edgeWidth: 2
                })
            }),

            new Mesh(viewer.scene, {  // Yellow table leg
                objectId: "yellowLeg",
                position: [-4, -6, 4],
                scale: [1, 3, 1],
                rotation: [0, 0, 0],
                geometry: boxGeometry,
                material: new PhongMaterial(viewer.scene, {
                    diffuse: [1.0, 1.0, 0.0]
                }),
                highlightMaterial: new EmphasisMaterial(viewer.scene, {
                    fill: true,
                    fillColor: [1, 1, 0],
                    fillAlpha: 0.7,
                    edges: true,
                    edgeColor: [1.0, 0.0, 0.0],
                    edgeAlpha: 1.0,
                    edgeWidth: 2
                })
            }),

            new Mesh(viewer.scene, { // Purple table top
                objectId: "tableTop",
                position: [0, -3, 0],
                scale: [6, 0.5, 6],
                rotation: [0, 0, 0],
                geometry: boxGeometry,
                material: new PhongMaterial(viewer.scene, {
                    diffuse: [1.0, 0.3, 1.0]
                }),
                highlightMaterial: new EmphasisMaterial(viewer.scene, {
                    fill: true,
                    fillColor: [1, 0, 1],
                    fillAlpha: 0.7,
                    edges: true,
                    edgeColor: [1.0, 0.0, 0.0],
                    edgeAlpha: 1.0,
                    edgeWidth: 2
                })
            })
        ]
    });

    //------------------------------------------------------------------------------------------------------------------
    // Mouse over Entities to highlight them
    // Recall that a Mesh is an Entity
    //------------------------------------------------------------------------------------------------------------------

    var lastEntity = null;

    viewer.scene.input.on("mousemove", function (coords) {

        var hit = viewer.scene.pick({
            canvasPos: coords
        });

        if (hit) {

            if (!lastEntity || hit.entity.id !== lastEntity.id) {

                if (lastEntity) {
                    lastEntity.highlighted = false;
                }

                lastEntity = hit.entity;
                hit.entity.highlighted = true;
            }
        } else {

            if (lastEntity) {
                lastEntity.highlighted = false;
                lastEntity = null;
            }
        }
    });
</script>
</html>